HTML5 Canvas와 자바스크립트로 구현한 물리 조작 교육용 게임 초등 수학 연산의 첫 번째 고비이자 가장 중요한 고개는 바로 '10의 보수(더해서 10이 되는 두 수)'를 완벽하게 숙달하는 것입니다. 10의 보수 개념을 직관적으로 떠올릴 수 있는 능력은 향후 받아올림이 있는 덧셈과 받아내림이 있는 뺄셈을 빠르고 정확하게 해결하기 위한 수학적 자신감의 기틀을 잡는 핵심 과정입니다. 이번에 제작한 '10 만들기 구슬 팡팡!' 게임은 새총을 당겨 구슬을 날리는 물리적인 재미를 통해, 아이들이 지루한 반복 암기 없이 자연스럽게 10의 보수 관계를 체득하도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 및 모바일/태블릿 브라우저 환경 을 모두 지원합니다. 손가락이나 마우스로 구슬을 직접 당겼다 놓는 슬링샷 조작 방식으로 설계되어 있어 터치 스크린이 있는 모바일 기기에서도 아주 매끄럽고 재미있게 플레이할 수 있습니다. (PC는 ESC 키로 전체 화면 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 구슬 장전: 화면 하단 새총에 장전된 나의 발사 구슬과 그 안에 적힌 숫자를 확인합니다. 조준 및 발사: 구슬을 마우스나 손가락으로 뒤로 길게 당겨 각도와 힘을 조절한 뒤, 목표를 향해 가볍게 놓아 발사합니다. 보수 매칭: 화면 상단에 떠다니는 구슬들 중, 내 구슬의 숫자와 더했을 때 정확히 '10'이 되는 구슬을 조준하여 맞힙니다. (예: 내 구슬이 '4'라면 '6'이 적힌 구슬을 사격!) 점수 획득: 올바른 보수 쌍을 맞히면 구슬이 시원하게 팡 터지며 점수가 올라가고 새로운 구슬이 리필됩니다. 잘못된 구슬을 맞히지 않도록 신중하게 조준해 보세요! 📊 구슬 팡팡이 다루는 학습 범위: 초등 저학년 수학의 핵심인 '10을 활용한 연산'의 기초 체력을 확실하게 길러줍니...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 수학 공부의 시작은 숫자를 암기하는 것이 아니라, 수의 양적인 변화를 직관적으로 이해하는 것입니다. 캣타워에 고양이가 들어오고 나가는 과정을 눈으로 보며 전체 마릿수를 계산하는 경험은 덧셈과 뺄셈의 원리를 몸소 깨닫는 매우 중요한 단계입니다. 이번에 제작한 '캣타워 수학 놀이'는 아이들이 좋아하는 고양이와 함께 놀며 자연스럽게 연산의 기틀을 잡도록 설계되었습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 구성상 모바일보다는 큰 화면에서 고양이들을 관찰하는 것이 학습 효과에 더 좋습니다. (PC는 ESC 키로 전체 화면 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 상황 관찰: 현재 캣타워에 있는 고양이 수와 새로 들어오거나 나가는 고양이의 움직임을 확인합니다. 수식 파악: 우측 패널의 수식(현재 수 +/- 이동 수 = ?)을 보고 정답을 생각합니다. 정답 입력: 하단 입력창에 숫자를 적고 [정답 확인] 버튼을 누릅니다. (엔터 키 사용 가능) 연속 도전: 정답을 맞히면 새로운 고양이들이 등장하며 다음 단계로 넘어갑니다. 연속으로 몇 문제를 맞힐 수 있는지 도전해 보세요! 📊 캣타워 수학 놀이가 다루는 학습 범위: 본 게임은 최대 20마리의 고양이를 활용하여 초등 저학년 수준의 기초 연산을 다룹니다. 수량 인지(양감): 캣타워 곳곳에 배치된 고양이들을 보며 수의 크기를 직관적으로 인지합니다. 덧셈 로직: 고양이가 추가로 들어오는 상황을 통해 '합'의 개념을 익힙니다. 뺄셈 로직: 고양이가 타워에서 뛰어내려 도망가는 연출을 통해 '차'의 개념을 시각적으로 학습합니다. 이번 게임은 총 20종의 다양한 고양이 이미지를 사용하여 아이들이 지루하지 않게 반복 학습을 할...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 우리말 어휘의 70% 이상을 차지하는 한자는 국어 문해력을 기르는 가장 핵심적인 열쇠입니다. 한자의 뜻과 음을 바르게 이해하는 것은 새로운 어휘를 접했을 때 그 의미를 스스로 유추해낼 수 있는 독해력과 사고력의 기틀을 잡는 매우 중요한 과정입니다. 이번에 제작한 '한자 대결: 타워 디펜스'는 지루한 암기식 한자 공부에서 벗어나, 퀴즈를 풀며 밀려오는 적들을 막아내고 자신의 진지를 진화시키는 디펜스 게임을 통해 한자를 즐겁게 마스터하도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 실시간으로 전개되는 디펜스 전장 상황을 파악하고 하단의 한자 퀴즈 선택지를 신속하게 클릭해야 하므로, 넓은 화면과 마우스 조작이 가능한 환경에서 가장 쾌적하게 즐길 수 있습니다. (PC는 ESC 키로 전체 화면 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 설정 및 시작: 메인 화면에서 자신의 실력에 맞는 게임 난이도와 학습하고자 하는 한자 급수 범위를 선택한 후 시작합니다. 상황 파악: 실시간으로 아군 기지를 향해 다가오는 적들의 공세를 확인하고 전장을 방어할 준비를 합니다. 한자 퀴즈 해결: 화면에 제시되는 한자 카드를 보고, 올바른 뜻과 음을 가진 선택지를 빠르게 클릭합니다. 기지 방어 및 진화: 퀴즈를 맞힐 때마다 강력한 방어 능력이 발동하며, 자원을 모아 원시 시대부터 점차 미래 시대로 기지를 진화시킬 수 있습니다. 적의 공격을 완벽히 막아내며 최종 승리를 거두어 보세요! 📊 한자 대결이 다루는 실제 학습 범위 (총 50자): 게임 내 내장된 정밀 데이터에 기반하여 초등 필수 한자 단계를 명확하게 구분해 학습합니다. 8급 범위 (1번 ~ 30번 한자): 기초 숫자: 一(한 일), 二(두 이), 三(석 삼), 四(넉 ...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 수학적 사고의 가장 기초는 수의 크기를 비교하고 양감을 익히는 것입니다. 큰 수와 작은 수를 구별하고 부등호(>, <, =)의 개념을 명확히 하는 과정은 수학적 논리력을 키우는 매우 중요한 단계입니다. 이번에 제작한 '공포의 수학 미로'는 자칫 지루할 수 있는 수 비교 학습에 '미로 탈출'과 '호러'라는 테마를 입혀, 아이들이 긴장감 속에서 집중력을 발휘해 수학 개념을 완벽하게 다지도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 미션 확인: 화면 상단에 제시된 '더 큰 수', '더 작은 수', 혹은 '알맞은 부등호' 미션을 확인합니다. 길 선택: 세 개의 문(길) 중 정답에 해당하는 숫자가 적힌 문을 클릭합니다. 미로 통과: 정답을 맞히면 미로 안으로 빨려 들어가는 듯한 1인칭 연출과 함께 다음 방으로 이동합니다. 연속으로 10개의 방을 통과하면 탈출 성공! 실패 주의: 오답을 선택하면 무시무시한 유령이 나타나며 게임이 종료됩니다. 정신을 바짝 차리고 숫자를 비교해 보세요! 📊 수학 미로가 다루는 학습 범위: 본 게임은 학습자의 수준에 맞춰 단계별로 수의 범위를 확장하여 구성되었습니다. 0단계 (시각적 수량): 숫자를 점(Dot)의 개수로 시각화하여 양의 개념을 직관적으로 이해합니다. 1단계 (1자리 수): 한 자리 수의 크기를 비교하며 기초적인 수 관계를 익힙니다. 2단계 (2자리 수): 십 단위 숫자를 비교하며 자리값의 개념을...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 수학 학습의 첫 단추는 눈으로 보이는 사물의 개수와 추상적인 숫자를 일치시키는 '수세기'에서 시작됩니다. 구체적인 개수를 하나씩 세어보며 수의 크기를 체득하는 과정은 향후 사칙연산을 배우기 위한 가장 중요한 기틀을 잡는 단계입니다. 이번에 제작한 '수세기 지렁이' 게임은 아이들이 지렁이를 조작하여 제시된 숫자와 일치하는 개수의 아이템을 찾아 먹으며, 즐겁게 기초 수 개념을 완성하도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 방향키를 이용해 지렁이를 세밀하게 조작해야 하므로 키보드가 있는 환경에서 플레이할 때 가장 쾌적하고 학습 효과가 좋습니다. (PC는 ESC 키로 전체 화면 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 미션 확인: 화면 상단에 제시된 '목표 숫자'와 '남은 정답 개수'를 확인합니다. 지렁이 조작: 방향키(← ↑ ↓ →)를 움직여 지렁이를 조작합니다. 화면에 무작위로 배치된 아이템 중, 점의 개수가 목표 숫자와 똑같은 아이템을 찾아 기어갑니다. 성장과 기록: 정답 아이템을 먹을 때마다 지렁이의 몸길이가 25cm씩 자라나고 몸집도 커집니다. 아이들은 길어지는 지렁이를 보며 직관적인 성취감을 맛볼 수 있습니다. 실수 주의: 목표 숫자와 개수가 다른 아이템을 먹거나 외곽 벽, 혹은 지렁이 자신의 몸에 부딪히면 실수가 카운트됩니다. 10번의 기회 동안 지렁이를 최대한 길게 키워보세요! 📊 수세기 지렁이가 다루는 학습 범위: 초등 수학의 기초가 되는 1부터 10까지의 구체물 수세기를 집중적으로 훈련합니다. 직관적 수량 인지: 숫자를 단순히 기호로만 보는 것이 아니라, 아이템 내장 도트(Dot)의 개수를 직접 세어보며 수의 실제 크기를 인지합니다. ...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 국어 학습의 기초는 문장을 구성하는 단어들의 성격, 즉 '품사'를 이해하는 것에서 시작됩니다. 움직임을 나타내는 말(동사), 성질이나 상태를 나타내는 말(형용사), 이름을 나타내는 말(명사)을 정확히 구분하는 능력은 올바른 문장 쓰기와 독해력의 기틀을 잡는 매우 중요한 단계입니다. 이번에 제작한 '단어 지렁이'는 아이들이 지렁이를 조작해 제시된 품사에 맞는 사과를 찾아 먹으며, 자신의 어휘 실력만큼 길어지는 지렁이를 보며 재미있게 문법 기초를 익히도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 미션 확인: 화면 상단에 제시된 '목표 품사(동사/형용사/명사)'와 '남은 정답 개수'를 확인합니다. 지렁이 조작: 방향키(← ↑ ↓ →)를 이용해 지렁이를 움직입니다. 화면에 배치된 여러 개의 빨간 사과 중 정답 단어가 적힌 사과를 찾아 먹어야 합니다. 성장과 기록: 정답 사과를 먹을 때마다 지렁이의 몸길이가 25cm씩 자라나고 몸집(두께)도 함께 커집니다. 내가 얼마나 많은 단어를 정확히 분류했는지 지렁이의 크기를 통해 직관적으로 확인할 수 있습니다. 실수 주의: 목표 품사와 맞지 않는 단어를 먹거나 벽, 혹은 자신의 몸에 부딪히면 실수가 카운트됩니다. 10번의 기회 안에 최대한 많은 단어를 학습하며 가장 크고 긴 지렁이를 만들어 보세요! 📊 단어 지렁이가 다루는 학습 범위: 본 게임은 초등 교육 과정의 필수 어휘를 품사별로 체계적으로 분류하여 다룹니다. 움직임을 표현하는 말 (동사): ...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 수학의 기초는 빠르고 정확한 연산 능력에서 시작됩니다. 연산은 단순히 계산을 하는 기능을 넘어, 논리적 사고의 속도를 높이고 수학적 자신감의 기틀을 잡는 중요한 과정입니다. 이번에 제작한 '연산 마스터: 매쓰 디펜더'는 아이들이 디펜스 게임이라는 긴장감 넘치는 형식을 통해 사칙연산을 놀이처럼 즐기며 숙달하도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 문제 해결: 다가오는 몬스터에 적힌 연산 문제를 확인하고, 하단의 선택지 중 정답을 클릭합니다. 공격 및 방어: 정답을 맞히면 레일건이 발사되어 몬스터를 물리칩니다. 몬스터가 방어선에 닿기 전에 빠르게 해결해야 합니다. 성장 시스템: 획득한 점수로 레일건의 레벨을 올리거나 유도 펫을 강화할 수 있습니다. 레벨이 올라갈수록 더 강력한 공격이 가능합니다. 다양한 시도: 난이도가 서서히 높아지는 과정을 통해 자신의 한계에 도전하며 연산 속도를 자연스럽게 높일 수 있습니다. 이번 게임은 연산의 지루함을 덜어내고 몰입감을 극대화하는 데 중점을 두었습니다. 자바스크립트의 Canvas API를 활용하여 부드러운 게임 화면을 구현했으며, 실시간으로 변화하는 난이도 조절 로직을 통해 아이들이 집중력을 유지하며 연산 실력을 기를 수 있는 환경을 제공합니다.  게임 내 구현된 수학 학습 요소를 단계별로 요약한 목록입니다. 1. 덧셈 1-1: 한 자리 수 덧셈 (받아올림 없음) 1-2: 한 자리 수 덧셈 (결과 10 이상, 받아올림 있음) 1-3: 10의 보수 찾기 (빈칸 채우기 형식) 1-4: 두 자...

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 국어 학습에서 어휘력은 모든 공부의 시작입니다. 특히 비슷한 말(동의어)과 반대되는 말(반의어)을 구분하는 능력은 독해력과 표현력을 풍부하게 만드는 어휘력의 기초 기틀을 잡는 과정입니다. 이번에 제작한 '동의어 반의어 승부차기'는 아이들이 승부차기라는 형식을 빌려 다양한 단어의 관계를 자연스럽고 확실하게 체득하도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 문제 확인: 화면 중앙에 제시된 '기준 단어'와 파악해야 할 '단어 관계(비슷한 말/반대말)'를 확인합니다. 선택지 선택: 제시된 3개의 선택지 중에서 정답이라고 생각하는 단어를 클릭합니다. 순차적 진행: 정답을 맞히든 틀리든 흐름이 끊기지 않고 순서대로 다음 문제로 진행됩니다. 아이들이 결과에 연연하지 않고 다양한 단어의 쓰임을 충분히 경험해 볼 수 있습니다. 자유로운 탐색: 제한 시간에 쫓기지 않고 단어의 뜻을 충분히 생각하며 다양하게 시도해 볼 수 있습니다. 이번 게임은 아이들이 단어 간의 유기적인 관계를 차분하게 배울 수 있도록 설계되었습니다. 3지 선다형 로직을 통해 사고의 폭을 넓혔으며, 정·오답 여부와 관계없이 끝까지 완주하며 성취감을 느낄 수 있는 학습 환경을 제공하는 데 중점을 두었습니다.

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 초등학교 3학년 수학에서 배우는 평면도형은 앞으로 배울 모든 수학적 사고의 기틀이 됩니다. 이 시기는 단순히 도형을 구별하는 것을 넘어, 각 도형의 특징을 명확히 이해하고 개념을 확실히 잡아야 하는 중요한 시기입니다. 이번에 제작한 '직삼사 미션'은 아이들이 서두르지 않고 스스로 고민하며 도형의 성질을 완벽히 이해하도록 돕습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 미션 확인: 화면 상단에 표시된 '만들어야 할 도형의 종류'와 '필요한 개수'를 확인합니다. 도형 제작: 제한 시간이나 속도 제한이 전혀 없습니다. 정해진 개수만큼 화면의 점판을 활용해 해당 도형을 직접 만듭니다. 자유로운 탐색: 빠르게 정답을 맞힐 필요 없이, 이리저리 다양하게 시도해 보며 도형의 특징(직각, 변의 길이 등)을 스스로 발견해 나갑니다. 미션 완료: 요구하는 수량을 모두 정확하게 채우면 미션 성공입니다. 이번 게임은 아이들이 정답에 대한 압박 없이 충분히 탐색할 수 있도록 설계되었습니다. 자바스크립트 로 각 점의 좌표를 계산하여 직사각형과 직각삼각형의 성질을 판별하는 로직을 구현했으며, 실패에 대한 두려움 없이 마음껏 시도할 수 있는 환경을 제공하는 데 중점을 두었습니다.

HTML5와 자바스크립트로 구현한 저사양 교육용 브라우저 게임 아이들이 처음 숫자를 접할 때 가장 중요한 것은 '양'에 대한 감각, 즉 수 개념 을 익히는 것입니다. 단순히 숫자를 쓰는 법을 배우기보다, 직접 눈으로 보고 손으로 조작하며 수량을 맞추는 과정이 훨씬 효과적입니다. 이번에 제작한 '피자 만들기 숫자 게임'은 이러한 기초 학습을 돕기 위해 담백하게 설계되었습니다. 💻 권장 플레이 환경 본 게임은 PC 브라우저 환경 에서의 플레이를 강력히 권장합니다. 화면 상단바 등으로 인해 하단 버튼이 가려질 경우 아래의 '전체 화면' 모드를 이용해 주세요. (PC는 ESC 키로 종료 가능) 🎮 게임 크게 보기 (전체 화면) 상세 조작 가이드: 주문 확인: 왼쪽 상단 '손님의 주문서'에 적힌 각 재료의 숫자를 확인합니다. 재료 선택: 아래 팔레트에서 원하는 재료를 클릭하면 마우스에 재료가 붙습니다. 재료 배치: 피자 도우 위를 클릭해 재료를 놓습니다. 이때 주문서의 숫자가 자동으로 카운트됩니다. 재료 삭제: 만약 숫자를 넘겼다면, 도우 위의 재료를 다시 클릭해 삭제할 수 있습니다. 요리 완성: 모든 숫자를 정확히 맞춘 뒤 '요리 완성!' 버튼을 누르면 성공입니다. 이번 게임은 DOM 조작 과 드래그 앤 드롭 로직을 활용해 순수 HTML/JS로 제작되었습니다. 아이들이 재료를 너무 촘촘하게 배치하지 않도록 최소 거리를 계산하는 로직을 넣어 조작감을 높였으며, 시각적인 수량 인지에 최적화된 SVG 아이콘을 사용했습니다. 또한 0.01%의 확률로 등장하는 '황금 피자' 이스터 에그를 통해 소소한 즐거움도 담았습니다.